<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',      // 主色调：蓝色
                        accent: '#f97316',       // 强调色：橙色
                        neutral: '#f3f4f6',      // 背景色：浅灰
                        'neutral-dark': '#1f2937' // 文本深色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .resume-container {
                max-width: 800px;
            }
            .section-divider {
                height: 2px;
                width: 60px;
            }
        }
    </style>
</head>
<body class="bg-gray-100 text-neutral-dark">
    <div class="min-h-screen flex flex-col">
        <!-- 页面头部 -->
        <header class="bg-primary text-white shadow-md">
            <div class="container mx-auto py-6 px-4">
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-center">个人简历</h1>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-grow container mx-auto px-4 py-8">
            <div class="resume-container mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
                <!-- 介绍部分 -->
                <section class="p-6 md:p-8 border-b border-gray-200">
                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-user-circle text-primary mr-2"></i>个人介绍
                    </h2>
                    <div class="section-divider bg-accent mb-6"></div>
                    
                    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
                        <!-- 照片区域 -->
                        <div class="w-full md:w-1/3 flex justify-center">
                            <div class="relative w-48 h-48 rounded-full overflow-hidden border-4 border-primary/20 shadow-md">
                                <img id="profilePhoto" src="photo.jpg" alt="个人照片" 
                                     class="w-full h-full object-cover">
                                <!-- 照片加载失败时显示的替代内容 -->
                                <div id="photoFallback" class="absolute inset-0 flex items-center justify-center bg-gray-100 hidden">
                                    <i class="fa fa-user text-5xl text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 介绍文本 -->
                        <div class="w-full md:w-2/3">
                            <div class="bg-neutral p-6 rounded-lg shadow-sm">
                                <p id="intro1" class="text-lg mb-3">你好，我是[你的名字]。</p>
                                <p id="intro2" class="text-lg">我是[你的班级]的学生。</p>
                                
                                <!-- 声音图标 -->
                                <button id="readAloudBtn" class="mt-4 bg-primary hover:bg-primary/90 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                    <i class="fa fa-volume-up"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 信息表单部分 -->
                <section class="p-6 md:p-8">
                    <h2 class="text-2xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-id-card text-primary mr-2"></i>个人信息
                    </h2>
                    <div class="section-divider bg-accent mb-6"></div>
                    
                    <form id="infoForm" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 第一列 -->
                            <div class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                                    <input type="text" id="name" name="name" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="class" class="block text-sm font-medium text-gray-700 mb-1">班级 <span class="text-red-500">*</span></label>
                                    <input type="text" id="class" name="class" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号 <span class="text-red-500">*</span></label>
                                    <input type="text" id="studentId" name="studentId" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="school" class="block text-sm font-medium text-gray-700 mb-1">学校/院系</label>
                                    <input type="text" id="school" name="school"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="country" class="block text-sm font-medium text-gray-700 mb-1">国家/地区</label>
                                    <input type="text" id="country" name="country"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                            </div>
                            
                            <!-- 第二列 -->
                            <div class="space-y-4">
                                <div>
                                    <label for="languages" class="block text-sm font-medium text-gray-700 mb-1">语言能力</label>
                                    <input type="text" id="languages" name="languages" placeholder="例如：中文、英语"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="hobbies" class="block text-sm font-medium text-gray-700 mb-1">爱好</label>
                                    <input type="text" id="hobbies" name="hobbies" placeholder="例如：阅读、游泳、编程"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200">
                                </div>
                                
                                <div>
                                    <label for="aboutMe" class="block text-sm font-medium text-gray-700 mb-1">关于我</label>
                                    <textarea id="aboutMe" name="aboutMe" rows="4" placeholder="简短介绍一下自己..."
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition duration-200"></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 提交按钮 -->
                        <div class="flex justify-center pt-4">
                            <button type="submit" 
                                class="bg-accent hover:bg-accent/90 text-white font-medium py-3 px-8 rounded-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent/50 shadow-md">
                                提交信息
                            </button>
                        </div>
                    </form>
                </section>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-neutral-dark text-white py-6">
            <div class="container mx-auto px-4 text-center">
                <p>&copy; 2025 个人简历网页 | 设计与开发</p>
            </div>
        </footer>
    </div>

    <!-- JavaScript -->
    <script>
        // 处理照片加载失败的情况
        document.addEventListener('DOMContentLoaded', function() {
            const profilePhoto = document.getElementById('profilePhoto');
            const photoFallback = document.getElementById('photoFallback');
            
            profilePhoto.addEventListener('error', function() {
                profilePhoto.style.display = 'none';
                photoFallback.classList.remove('hidden');
            });
            
            // 声音朗读功能
            const readAloudBtn = document.getElementById('readAloudBtn');
            const intro1 = document.getElementById('intro1').textContent;
            const intro2 = document.getElementById('intro2').textContent;
            
            readAloudBtn.addEventListener('click', function() {
                // 创建语音合成对象
                const speech = new SpeechSynthesisUtterance();
                
                // 设置语音内容
                speech.text = intro1 + intro2;
                
                // 设置语言为中文
                speech.lang = 'zh-CN';
                
                // 设置音量、语速和语调
                speech.volume = 1;
                speech.rate = 1;
                speech.pitch = 1;
                
                // 播放语音
                window.speechSynthesis.speak(speech);
                
                // 按钮动画效果
                readAloudBtn.classList.add('animate-pulse');
                setTimeout(() => {
                    readAloudBtn.classList.remove('animate-pulse');
                }, 1000);
            });
            
            // 表单提交处理
            const infoForm = document.getElementById('infoForm');
            infoForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const formData = new FormData(infoForm);
                const formValues = Object.fromEntries(formData.entries());
                
                // 显示提交成功消息
                alert('信息提交成功！\n\n' + JSON.stringify(formValues, null, 2));
                
                // 更新介绍部分的姓名和班级
                if (formValues.name) {
                    document.getElementById('intro1').textContent = `你好，我是${formValues.name}。`;
                }
                if (formValues.class) {
                    document.getElementById('intro2').textContent = `我是${formValues.class}的学生。`;
                }
            });
        });
    </script>
</body>
</html>
